// 收不到手机验证码
import black from '@/assets/black_list.png';
import net from '@/assets/net.png';
import phone from '@/assets/phone_g.png';
import ping from '@/assets/service.png';
import sms from '@/assets/sms.png';
import { Col, Modal, Row } from 'antd';
import { useIntl } from 'umi';
type Props = {
  visible: boolean;
  handleCancel: () => void;
  type?: string;
};
const CodeModal: React.FC<Props> = ({ visible, handleCancel, type = 'mobile' }) => {
  const intl = useIntl();
  const isPhone = type == 'mobile';
  const list = isPhone
    ? [
        {
          icon: net,
          label: 'login.code.net',
          word: 'login.code.net_word',
        },
        {
          icon: ping,
          label: 'login.code.ping',
          word: 'login.code.ping_word',
        },
        {
          icon: black,
          label: 'login.code.black',
          word: 'login.code.black_word',
        },
        {
          icon: phone,
          label: 'login.code.phone',
          word: 'login.code.phone_word',
        },
        {
          icon: sms,
          label: 'login.code.sms',
          word: 'login.code.sms_word',
        },
      ]
    : [
        {
          label: 'home.send_again',
          word: 'home.send_again_w',
        },
        {
          label: 'home.send_dustbin',
          word: 'home.send_dustbin_w',
        },
        {
          label: 'home.send_reject',
          word: 'home.send_reject_w',
        },
        {
          label: 'home.send_sign',
          word: 'home.send_sign_w',
        },
        {
          label: 'home.send_num',
          word: 'home.send_num_w',
        },
      ].map((item, index) => {
        return {
          ...item,
          icon: require(`@/assets/code${index + 1}.png`),
        };
      });
  return (
    <Modal
      onCancel={handleCancel}
      closable={false}
      footer={false}
      width={540}
      centered
      open={visible}
      destroyOnClose
    >
      <div style={{ textAlign: 'center', fontSize: 24, fontWeight: 'bold' }}>
        {intl.formatMessage({ id: isPhone ? 'login.code.title' : 'home.send.title' })}
      </div>
      <Row style={{ margin: '24px 0' }} gutter={[16, 35]}>
        {list.map((item) => {
          const { icon, label, word } = item;
          return (
            <Col style={{ display: 'flex', gap: 19 }} key={word} span={24}>
              <div>
                <img src={icon} width={50} />
              </div>
              <div>
                <div style={{ fontSize: 16, color: '#333', marginBottom: 4 }}>
                  {intl.formatMessage({ id: label })}
                </div>
                <div style={{ fontSize: 14, color: '#999' }}>
                  {intl.formatMessage({ id: word })}
                </div>
              </div>
            </Col>
          );
        })}
      </Row>
      <div style={{ textAlign: 'center', fontSize: 16 }}>
        {intl.formatMessage({ id: 'login.customer' })}
        <span style={{ color: '#8BC782' }}>+852 2307-1122</span>
      </div>
    </Modal>
  );
};

export default CodeModal;
